<template>
  <el-dialog
    v-model="createVisible"
    title="设置分组"
    @before-ok="saveOk"
    @close="close(createRef)"
    width="500px"
    top="100px"
  >
    <div style="width: 400px" v-loading="initLoading">
      <el-form
        :model="createForm"
        ref="createRef"
        :rules="createRules"
        label-width="130px"
        size="default"
        v-loading="initLoading"
      >
        <el-form-item label="分组：" prop="group_id">
          <el-select v-model="createForm.group_id" placeholder="请选择分组">
            <el-option
              v-for="item in groupSelect"
              :key="item.id"
              :label="item.group_name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <span class="flex center">
        <el-button @click="close(createRef)">取消</el-button>
        <el-button
          type="primary"
          :loading="btnLoading"
          :disabled="btnLoading"
          @click="saveOk(createRef)"
          >确定</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts">
export default {
  name: "userUpdateGroup",
};
</script>

<script lang="ts" setup>
import { ref, getCurrentInstance, nextTick, reactive } from "vue";
import type { FormInstance } from "element-plus";
import { Result, ResultError } from "@/types";

import { updateUserGroup } from "@/api/user/index";
import { getUserGroupSelect } from "@/api/user/group";
const {
  proxy: { $message, $utils },
} = getCurrentInstance() as any;

const emit = defineEmits(["success"]);

const createVisible = ref<boolean>(false);

const operationId = ref<number>(0);

const btnLoading = ref<boolean>(false);

const parentTree = ref<any>([]);

const initLoading = ref<boolean>(true);

const createRef = ref<typeof FormInstance>();

const createForm = ref<{
  group_id: number | unknown;
}>({
  group_id: null,
});
const createRules: any = reactive({
  group_id: [{ required: true, message: "请选择分组！" }],
});

const saveOk = async (formEl: typeof FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid: any, fields: any) => {
    if (valid) {
      if (btnLoading.value) {
        return;
      }
      btnLoading.value = true;
      updateUserGroup(
        Object.assign(
          {
            id: operationId.value,
          },
          createForm.value
        )
      )
        .then((res: Result) => {
          $message.success(res.message);
          close(formEl);
          emit("success");
          btnLoading.value = false;
        })
        .catch((err: ResultError) => {
          $utils.errorMsg(err);
          btnLoading.value = false;
        });
    }
  });
};

const groupSelect = ref<any>([]);

const toInit = () => {
  getUserGroupSelect()
    .then((res: Result) => {
      groupSelect.value = res.data;
      initLoading.value = false;
    })
    .catch((err: ResultError) => {
      $utils.errorMsg(err);
    });
};

const open = (id: number = 0, groupId: number = 0) => {
  initLoading.value = true;
  if (id != 0) {
    operationId.value = id;
  }
  if (groupId != 0) {
    createForm.value.group_id = groupId;
  }
  nextTick(() => {
    toInit();
  });
  createVisible.value = true;
};

const close = async (formEl: typeof FormInstance | undefined) => {
  if (formEl) {
    formEl.resetFields();
  }
  operationId.value = 0;
  createVisible.value = false;
};

defineExpose({ open });
</script>